<script setup>
import { ref, watch } from 'vue'
import { getItemByIdService } from '@/api/item.js'

const props = defineProps({
  itemId: {
    type: Number,
    required: true
  }
})

// 物品状态与el-tag类型映射
const itemStatusTagTypeMap = {
  启用: 'success',
  禁用: 'danger'
}
const getItemStatusTagType = (status) => {
  return itemStatusTagTypeMap[status] || 'info'
}

// 获取物品信息
const itemInfo = ref({})
const getItemById = async (id) => {
  const res = await getItemByIdService(id)
  itemInfo.value = res.data.data
}

// 监听 itemId 的变化，当 itemId 变化时重新获取物品信息
watch(
  () => props.itemId,
  (newId) => {
    if (newId) {
      getItemById(newId)
    }
  },
  { immediate: true }
)
</script>

<template>
  <el-form :model="itemInfo" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="物品ID">
          <el-tag type="info">{{ itemInfo.id }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="物品名称">
          <el-tag type="info">{{ itemInfo.name }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="物品类别名称">
          <el-tag type="info">{{ itemInfo.itemCategoryName }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="品牌">
          <el-tag type="info">{{ itemInfo.brand ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="物品价格">
          <el-tag type="info">{{ (itemInfo.price / 100).toFixed(2) }}元</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="库存">
          <el-tag type="info">{{ itemInfo.stock }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="最小库存">
          <el-tag type="info">{{ itemInfo.minStock }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="物品状态">
          <el-tag :type="getItemStatusTagType(itemInfo.status)">{{ itemInfo.status }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="物品描述">
          <el-tag type="info">{{ itemInfo.description ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-tag type="info">{{ itemInfo.createTime }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="更新时间">
          <el-tag type="info">{{ itemInfo.updateTime }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
